<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
ul.action_admin li {
	float: left;
	list-style: none;
	padding: 0px 5px 0px 0px;
}

ul.action_admin {
	display: inline-block;
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,183,229,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: 85px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
    display: none;
    
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}

/****************************************************************/
.load-container {
border: 1px solid rgba(255, 255, 255, 0.2);
width: 240px;
height: 240px;
float: left;
position: relative;
/* overflow: hidden; */
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/********************************/
.loader:before,
.loader:after,
.loader {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  margin: 8em auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  -webkit-animation-delay: 0.16s;
  animation-delay: 0.16s;
}
.loader:before {
  left: -3.5em;
}
.loader:after {
  left: 3.5em;
  -webkit-animation-delay: 0.32s;
  animation-delay: 0.32s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #ffffff;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #FFF;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #ffffff;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #FFF;
  }
}

/************************************************/
.ball {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
margin-top: 20%;
-moz-animation: spin .5s infinite linear;
-webkit-animation: spin .5s infinite linear;
}

.ball1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoff .5s infinite linear;
-webkit-animation: spinoff .5s infinite linear;
}
.load {
width: 150px;
height: 50px;
text-align: center;
color: #00ccff;
font-size: 20px;
text-shadow: 2px 2px 5px #666;
margin: 0 auto;
margin-top: 1%;
}

/***********************************************/
#loadingRT {
  z-index: 10;
  width: 100%;
  height: 50px;
  position: absolute;      
  bottom: 0;
  background: rgba(48,51,58,0.6);
  line-height: 50px;
  text-align: center;      
  color:white;
  font-weight: bold;      
  animation: pulse 2s ease-in-out 1s infinite;

  .ld {
    &:before {
      content:"•";
      position: absolute;
      left: 0;
      animation: pulseLeft 1s linear 1s infinite;
    }
    &:after {
      content:"•";
      position: absolute;
      right: 0;
      animation: pulseRight 1s linear 1s infinite;
    }
  }
}

@keyframes pulse {
  0%   {background: rgba(0,0,0,1);}
  50%  {background: rgba(0,0,0,0.5);}
  100% {background: rgba(0,0,0,1);}
}
@keyframes pulseLeft {
  0% {left:0;}
  50% {left:50%;}
  100% {left:0;}
}
@keyframes pulseRight {
  0% {right:0;}
  50% {right:50%;}
  100% {right:0;}
}
</style>

<script>


//circle1
function divFunction(){
	//alert("submitbutton click"); 
    $(document).ready(function() {
    	$("#loadingRT").show();
        $("#circle1").show();// hidden load ajax
    	$("#loading").show();
    	
    	
	        var url = $('#urlaction').val();
		    var id = $('#id').val();
		    var ig = $('#ig').val();
		    var idforeign = $('#idforeign').val();
		    var src = $('#src').val();
		    var myData = {"url":url,"id":id,"ig":ig,"idforeign":idforeign,"src":src };
		    
// 		    alert(url);
// 		    alert(id);
// 		    alert(idforeign);
// 		    alert(src);
		    
// 		    //alert(myData);
		   // return 0;
		   //$("#circle1").show();
		  
		   $(".modal-header .close").click();
		   
		    $.ajax({
	            type:"POST",
	            url:url,
	            data:myData,
	            success: function(data){
	            	$("#loadingRT").hide();
	            	 $("#circle1").hide();// hidden load ajax
	            	$("#loading").hide();
	    			$("#loading1").hide();
	    			$(".alert .alert-success").show();
	    			//$(".alert .alert-success").css('display':'block');
	    			
	            	// $("#circle1").hide();
	            	//$(".loader").css("display","none");
	            	
	            	          console.log(data);
	                                    },
	            error: function (data) {
	                                        console.log(data);
	                                    }


	           });
	    });
     
}



</script>


<?php
// echo '<pre>';
// print_r($this->readdetail) ;
// echo '</pre>';
?>
<?php /* ?>
<div class="circle1"></div>

<div class="load-container load7">
<div class="loader">Loading...</div>
</div>

                    <div id="loading">	
						<div class="ball"></div>
							<div class="ball1"> </div>
							<div class="load">Loading...</div>
					</div>
					*/?>
<div id="loadingRT">  
  <span class="ld">Loading</span>  
</div>


<?php
$igirl_id = $this->igirl_id;
if (is_array ( $this->readdetail ) and ! empty ( $this->readdetail )) {
	foreach ( $this->readdetail as $key => $detail ) {
		
		?>
<h1><?php echo $detail['title'];?></h1>
<div>
	<img alt="" src="<?php echo $detail['src'];?>">
</div>
<p>
	<strong><?php echo $detail['description'];?></strong>
</p>
<div style="display: none;"><?php echo $detail['page'];?></div>
<ul class="action_admin">
	<li><a class="btn  btn-mini  "
		href="<?php echo WEB_PATH ?>/contendetail/edit/<?php echo $detail['id'].'/ig/'.$this->id?>">Edit</a>
	</li>
	<li><a href="#myModal" role="button" class="btn" data-toggle="modal">Add new</a></li>
	<li><a class="btn  btn-mini  "
		href="<?php echo WEB_PATH ?>/contendetail/delete/<?php echo $detail['id'].'/ig/'.$this->id;?>">Delete</a></li>
	<li><a class="btn  btn-mini  "
		href="<?php echo WEB_PATH ?>/commnet/commnet/<?php echo $detail['id'];?>">Commnet</a></li>

</ul>

<?php
	}
} else {
	die ( "Not Found Record ! " );
}

?>


<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">×</button>
		<h3 id="myModalLabel">Add New</h3>
	</div>
	<div class="modal-body">
		<div class="containerRT">

			<div name="contendetail"  id="contendetail">
			    <input type="hidden" name ="urlaction" id="urlaction" value="<?php echo WEB_PATH ?>/contendetail/ajaxdetail/<?php echo $detail['id'].'/ig/'.$this->id?>">
				<input name="id" id="id" type="hidden" value=""> 
				<input name="ig" id="ig" type="hidden" value="<?php echo $this->id;?>"> 
				<input name="idforeign" id="idforeign" type="hidden" value="<?php echo $this->id;?>"> 
				<label><span>Upload images</span>
				 <input name="src" id="src" type="file" required="required">
				 </label>
			</div><!-- name="contendetail"  id="contendetail" -->
	<?php /*?>		
			<script type="text/javascript" src="http://127.0.0.1:1917/plugins/ckeditor/ckeditor.js"></script>
			<script type="text/javascript">
		CKEDITOR.replace( 'description', {
			width: "900px",
			height: "300px",
			toolbar: "Full"
		} );
		</script>
		*/ ?>
		
		</div>
		<!-- class="container" -->
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
		<button class="btn btn-primary" onClick="divFunction()">Save Add new</button>
	</div>
</div>


<div class="alert alert-error">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Error!</strong>This is a fatal error.
</div>
<div class="alert alert-success">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Success!</strong>You have successfully done it.
</div>
<div class="alert alert-info">
  <a class="close" data-dismiss="alert">×</a>
  <strong>Info!</strong>Watch this, but you may forget.
</div>